在成功搭建好環境後，我們就可以開始創建我們的React Native專案了

初始化創建專案

npx react-native@latest init TestRN

創建成功後，會看到這樣的檔案結構

└── TestRN
  ├── App.tsx
  ├── __tests__
  ├── android
  ├── app.json
  ├── babel.config.js
  ├── index.js
  ├── ios
  ├── metro.config.js
  ├── node_modules
  ├── package.json
  ├── package-lock.json
	├── app.json
	├── Gemfile
	├── jest.config.js
	├── node_modules
	├── README.md
	├── tsconfig.json
	├── vendor
  └── yarn.lock

檔案結構介紹

├── metro.config.js

Metro 是 React Native 的 JavaScript 打包工具。如果需要進行客制或有特殊需求，可以修改這個配置文件。

├── android
├── ios

這兩個是放IOS、Android原生程式碼的目錄，有時可能需要手動將套件與原生進行連接，或進行原生組件的配置時會改到。

├── __tests__
├── jest.config.js

測試與配置相關，__tests__目錄存放Jest單元測試相關的文件，而jest.config.js則是Jest的配置文件。

├── App.tsx
├── index.js

App.tsx是專案的主入口，預設的專案會有一個簡單的介面。現在ReactNative初始化預設都是使用TypeScript，所以會是.tsx檔。而index.js則負責引入App.tsx並讓其在React Native環境中運行。

├── Gemfile
├── vendor

Ruby 相關：Gemfile用於管理Ruby專案所需的gems。vender目錄用於存放Ruby專案中非原始開發但需要的第三方資源和庫

運行IOS

1. 安裝 iOS依賴

   cd ios
   pod install
   

   pod install 對於 iOS 開發來說，就如同 Node.js 專案中的 npm install。開始前我們要先安裝必要的套件。

   若在安裝過程中遇到以下錯誤：

   /usr/local/Cellar/cocoapods/1.12.1/libexec/gems/cocoapods-1.12.1/lib/cocoapods/command.rb:128:in git_version': Failed to extract git version from git --version` ("xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun\n")
   

   這通常表示 CommandLineTools 未正確配置

2. 執行run-ios

   npx react-native run-ios
   

   過程中系統會自動啟動 iOS 模擬器並運行應APP。
   

運行Android

1. 執行 run-android

   npx react-native run-android
   

   執行過程中還會自動啟動Android模擬器。如果您已按照之前的文章正確設置環境，那麼應該都能夠順利執行成功。
   

   到這裡 你已經完成運行第一個APP了!

常見問題

• run-ios時自動幫我們啟動了模擬器，但是如果想用不同型號模擬器呢？

  1. 首先查看可用的iOS模擬器列表：

     xcrun simctl list devices
     

     此命令將列出所有可用的iOS模擬器。

  2. 指定模擬器運行應用：
     例如這裡我想用 iPhone 14 Pro 模擬器，可以使用 --simulator 參數進行指定。

     npx react-native run-ios --simulator="iPhone 14 Pro"
     

• xcrun simctl list devices列表中沒有我想要的iOS模擬器，如何新增模擬器？

  1. 打開 Xcode。
  2. 從菜單選擇 Window > Device and Simulators。
  3. 在出現的窗口中，點擊 Simulators 標籤。
  4. 在左下角找到 + 按鈕，點擊它來新增一個新的模擬器。

• Android如何用不同型號模擬器

  1. 查看可用的Android模擬器列表

     emulator -list-avds
     

  2. 開啟特定模擬器

     emulator -avd [模擬器名稱]
     

     例如： emulator -avd Pixel_3a_API_34_extension_level_7_x86_64
  3. 運行應用

     npx react-native run-android
     

• 如何新增Android模擬器

  1. 開啟 Android Studio。
  2. 點擊右上角的 Virtual Device Manager以管理或新增模擬器。
     

• 如何運行在IOS真機

  1. 將iOS設備連接至Mac，並在手機提示時選擇“信任此電腦”。
  2. 進入到ios目錄並雙擊.xcworkspace文件以在Xcode中開啟你的專案。
  3. 配置簽名
     a. 在Xcode的左側導覽面板中，點擊你的專案名。
     b. 在中央部分，確保你的專案名字在"TARGETS"列表中被選中。
     c. 接著，轉到“Signing & Capabilities”標籤。
     d. 在“Team”下拉選單中，選擇你的Apple帳號。(沒登入過可能會是Add Account按鈕，點擊登入即可）
     
  4. 在Xcode的頂部工具欄，從設備下拉列表中選擇你的iOS裝置。
     
  5. 點擊Xcode工具欄中的"Run"按鈕（或按Cmd+R）
     

  若第五步驟遇到「不信任的開發者」提示，在iOS裝置上進入「設定」->「一般」->「VPN與裝置管理」，找到並點擊你的開發者帳號，然後點選「信任」。

• 如何運行在Android真機

  1. 確認Android設備已開啟開發者模式，並且USB調試也有打開。
  2. 將Android設備連接至電腦
  3. 在終端或命令行中輸入 npx react-native run-android
  4. 如果npx react-native run-android命令沒能找到你的設備，可以用 adb devices 查看已連接的設備ID，然後指定執行該設備 npx react-native run-android --deviceId=[你的設備ID]。

• 可以不用TypeScript?
  從 React Native 0.71 版本開始，項目預設採用TypeScript，所以初始化的項目會有 App.tsx 文件。如果不打算使用TypeScript，可以在初始化時選擇 0.71 之前的版本，或者將文件後綴 .tsx 改為 .js 。

小結

今天介紹了React Native創建和運行，從專案的初始化、理解其檔案結構到實際的運行步驟。此外，也介紹了在這過程中可能遇到的常見問題，並提供了解答與建議。